<template>
  <my-dialog :title="title"
             :width="width"
             :height="height"
             v-if="currVisible"
             :visible.sync="currVisible"
             :footer="footer"
             :maximizable="maximizable"
             :draggable="draggable"
             :headerHeight="96"
             :theme="theme"
             target="body"
             class="screen-dialog"
             modal
             @close="onCancel"
             v-bind="$attrs">

    <template v-slot:title>
     <div class="screen-dialog-head">
       <img class="screen-dialog-doc" src="@/assets/screen/dialog-document.svg"/>
       {{ title }}
     </div>
    </template>

    <component :is="comp"
               @cancel="onCancel"
               v-bind="props"
               @on-ok="onOK"
               v-on="listeners"
    />
  </my-dialog>
</template>

<script>
import myDialog from '@/components/common/dialog/Dialog'
export default {
  name: 'screen-dialog',
  cnName: '大屏-dialog',
  components: {
    myDialog
  },
  props: {
    title: String,
    comp: {
      type: Object,
      default: null
    },
    width: {
      type: String,
      default: '60%'
    },
    height: {
      type: String,
      default: '70%'
    },
    visible: {
      type: Boolean
    },
    props: Object,
    listeners: Object,
    theme: {
      type: String,
      default: 'light'
    },
    draggable: {
      type: Boolean,
      default: true
    },
    maximizable: {
      type: Boolean,
      default: false
    },
    footer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currVisible: this.visible
    }
  },
  methods: {
    onOK(data, refresh) {
      this.$emit('on-ok', data, refresh)
    },
    onCancel() {
      this.currVisible = false
      this.$emit('cancel')
    }
  },
  watch: {
    currVisible(val) {
      this.$emit('update:visible', val)
    },
    visible(val) {
      this.currVisible = val
    }
  },
  computed: {},
  mounted() {

  }
}
</script>

<style  lang="scss" >
.screen-dialog {
  color: #FFF;
  position: fixed !important;
  display: block;
  z-index: 1000 !important;

  &-head {
    padding-top: 19px;
    padding-left: 14px;
    display: flex;
    align-items: center;
  }
  &-doc {
    margin-right: 10px;
  }

  .my-dialog {
    overflow: visible;
  }
  .my-dialog-panel {
    background: url("~@/assets/screen/dialog-bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .my-dialog-panel.is-light .my-dialog-panel__title {
    font-size: 40px;
    letter-spacing: 4px;
    color: #FFFFFF;
    font-weight: 700;
    text-shadow: 1px 1px 3px #0079fe;
  }
  .my-dialog-panel__header {
    height: 100%;
  }
  .my-dialog-panel.is-light .my-dialog-panel__header:after {
    display: none;
  }
  .my-dialog-panel__tool .my-icon.icon-close {
    background: linear-gradient(180deg, #20D9FF, #1772FC);
    position: absolute;
    font-size: 2em;
    margin-left: 0;
    margin-top: 0;
    top: -10px;
    left: -19px;
    opacity: 1;
    width: 48px;
    height: 48px;

    &:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: url("~@/assets/screen/ico-close.svg") center center  no-repeat;
    }

    svg {
      display: none;
    }
  }
}
</style>
